// pages/my/myExtension/myExtension.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    codeImg:'',
    img:'http://192.168.188.140:8080/static/qrcode/151507_8782.jpg',
    codeBgImg:'',
    ctxWidth:375,
    ctxHeight:400,
    headPic:"",
    myQrcode:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // let _this = this;

    let _this = this,
        ctxWidth = _this.data.ctxWidth,
        ctxHeight = _this.data.ctxHeight,
        ratio = ctxWidth / ctxHeight;
    wx.getSystemInfo({
      success:function(res){
        _this.setData({
          ctxWidth:res.screenWidth,
          ctxHeight:res.screenWidth / ratio
        });

      }
    })

    // var headPic = wx.getStorageSync("headPic");
    // 直接下载头像操作
      _this.getavatar();
    var qrcode  = wx.getStorageSync("qrcode");
    // if (headPic) {
    //   _this.setData({
    //     headPic: headPic
    //   })
    // } else {
    //   _this.getavatar();
    // }
      // _this.getQrcode();

    if (qrcode) {
      _this.setData({
        myQrcode: qrcode
      })
    } else {
      _this.getQrcode();
    }
    wx.showLoading({
      title: '图片正在生成',
    })
    setTimeout(function () {
      _this.drawImage();
      // _this.click();
      wx.hideLoading();
    }, 2500)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  drawImage: function () {
    let _this = this,
      ctxWidth = _this.data.ctxWidth,
      ctxHeight = _this.data.ctxHeight,
      ratio = ctxWidth / ctxHeight, // 比例
      widthRatio = ctxWidth / 375,
      heightRatio = ctxHeight / 400,
      headPic = _this.data.headPic,
      myQrcode = _this.data.myQrcode;
    let ctx = wx.createCanvasContext('canvas');


    ctx.beginPath()
    ctx.setFillStyle('#46C069')
    ctx.fillRect(0, 0, ctxWidth, ctxHeight)
    ctx.drawImage('/images/code_bg.png', 0, 0, ctxWidth, 267 * heightRatio)
    ctx.draw(true)
    ctx.closePath()

    // 二维码
    ctx.drawImage(myQrcode, 220 * widthRatio, 90 * heightRatio, 80 * widthRatio, 80 * heightRatio)
    ctx.draw(true)
    // // ctx.arc(100, 75, 50, 0, 2 * Math.PI)
    // // ctx.setFillStyle('#EEEEEE')
    // // ctx.fill();
    // // ctx.draw(true)
    ctx.setFillStyle('#d3fbcc')
    ctx.fillRect(87.5 * widthRatio, 280 * heightRatio, 200 * widthRatio, 75 * heightRatio)
    ctx.draw(true)
    ctx.save()
    ctx.beginPath()
    ctx.arc(120 * widthRatio, 315 * heightRatio, 25 * widthRatio, 0, 2 * Math.PI)
    // ctx.setFillStyle('#EEEEEE')
    ctx.fill()
    ctx.clip()

    // 头像
    ctx.drawImage(headPic, 96 * widthRatio, 291 * heightRatio, 50 * widthRatio, 50 * widthRatio)
    ctx.restore()
    ctx.draw(true)
    ctx.setFillStyle('#46C069')
    ctx.setFontSize(16)
    ctx.fillText(app.globalData.userInfo.member_name, 160 * widthRatio, 320 * heightRatio)
    ctx.draw(true)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  // 下载头像
  getavatar: function () {
    var page = this;
    var headPic = app.globalData.userInfo.member_avatar;
    wx.downloadFile({
      url: headPic, //下载的头像地址
      success: function (res) {
        page.setData({
          headPic: res.tempFilePath
        })
      },
      fail: function (res) {}
    })
  },

  // 下载二维码
  downQrcode: function () {
    var page = this;
    var qrcodeUrl = app.globalData.qrcodeUrl;
    // return;
    wx.downloadFile({
      url: qrcodeUrl, //下载的头像地址
      success: function (res) {
        page.setData({
          myQrcode: res.tempFilePath
        })
      },
      fail: function (res) {}
    })
  },


  // 获取二维码接口
  getQrcode: function () {
    // wx.showLoading({
    //   title: "正在生成二维码",
    // });
    var page = this;
    app.util.ajax({
      url: 'api/User/userQrcode',
      success: function (res) {
        if (res.data.code == 1) {
          var qrcode = res.data.data;
          wx.setStorageSync("qrcode", qrcode);
          app.globalData.qrcodeUrl = qrcode;
          page.downQrcode();
          //我这里的imgurl是已经请求出来的图片路径。这里需要注意的是，img的域名如果是http的可能要改为https的，不然后面图片不会出来。
          // wx.setStorage({ //数据存储下来，当时做这个需求时并没有存储，直接下载的图片去绘制的，但是电脑上可以出来，手机不能。所以就多了这一步，有点坑
          //   key: "qrcode",
          //   data: qrcode,
            // success: function (res) {
              // 下载图片
              // app.globalData.qrcodeUrl = qrcode;
              // page.downQrcode();
              // wx.downloadFile({
              //   url: qrcode,
              //   success: function (res) {
              //     wx.setStorageSync("qrcode", res.tempFilePath);
              //     page.setData({
              //       myQrcode: res.tempFilePath
              //     })
              //   }
              // })
          //   }
          // })

        } else {
          wx.showToast({
            title: res.msg,
            image: "/images/icon-warning.png"
          })
        }
        // wx.hideLoading();
      }
    });
  },

 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

    let self = this;
    let value = wx.getStorageSync('userInfo');
    // if (value.member_id)
    // {
    //   self.setData({
    //     tk_id: value.member_id
    //   })
    // }
    return{
      title: '代言',
      // member_id
      // path: '/pages/index/detail/detail?id=' + self.data.id + '&tk_id='+value.member_id,
      path: '/pages/index/index?tk_id='+value.member_id,
      // imageUrl:self.data.data.header_pic,
      
    }

  },
  // 预览图片
  previewImage:function(e){
    wx.canvasToTempFilePath({
        canvasId:'canvas',
        success:function(res){
          var tempFilePath = res.tempFilePath;
          wx.previewImage({
            current: tempFilePath, 
            urls: [tempFilePath]
          })
        }
      }) 
  }
})